<template>
    <div class="amap-wrapper" >
        <el-amap  style="width:500px;height:500px;"  id="mapcointainer" 
        :zoom="zoom"
        :center="center">
          <el-amap-marker vid="component-marker" :position="componentMarker.position"  visible="true"></el-amap-marker>
        </el-amap>
    </div>
</template>

<script>
import {lazyAmapApiLoaderInstanse} from 'vue-amap';
// import AMap from 'AMap'
export default {
  data () {
    return {
      msg: 'vue-amap向你问好！',
      zoom:18,
      center:[117.124966,36.653123],
      componentMarker: {
        position: [117.124966,36.653123]
      }, 
    }
  },
  mounted() {
    // this.map = new AMap.Map('mapcointainer', {
    // resizeEnable:true,
    // zoom:11,
    // center:[116.397428,39.90923]
    // })
    lazyAMapApiLoaderInstance.load().then(() => {
        // your code ...
        this.map = new AMap.Map('mapcointainer', {
            // center: new AMap.LngLat(117.124966,36.653123)
        });
    });
  }
}
</script>

<style>
.amap-wrapper {
  width: 500px;
  height: 500px;
}
</style>